<template>
    <div>
        <el-container class="all">
            <el-aside class="left" :style="{ width: (isCollapse ? '65px' : '200px') }">
                <div class="left_head"
                    :style="[isCollapse ? `width:65px;background-color:${themeColor}` : `width:200px;background-color:${themeColor}`]">
                    <div v-if="!isCollapse" class="vol">VOL</div>
                    <div class="icon" @click="isCollapse = !isCollapse">
                        <img src="/img/折叠.png">
                    </div>
                </div>
                <el-row class="tac">
                    <el-col>
                        <el-menu router unique-opened style="width:100%;margin-top: 4rem;" :collapse="isCollapse"
                            default-active="2">
                            <el-sub-menu index="1">
                                <template #title>
                                    <el-icon>
                                        <Goods />
                                    </el-icon>
                                    <span>商品信息</span>
                                </template>
                                <el-menu-item index="商品分类" route="/productClassify" @click="addTag($event)">商品分类
                                </el-menu-item>
                                <el-menu-item index="商品信息" route="/productInfo" @click="addTag($event)">商品信息
                                </el-menu-item>
                                <el-menu-item index="商品信息tree" route="/productTree" @click="addTag($event)">商品信息tree
                                </el-menu-item>
                            </el-sub-menu>
                            <el-sub-menu index="2">
                                <template #title>
                                    <el-icon>
                                        <Document />
                                    </el-icon>
                                    <span>订单管理</span>
                                </template>
                                <el-menu-item index="订单管理" route="/ordermanage" @click="addTag($event)">订单管理
                                </el-menu-item>
                                <el-menu-item index="新订单" route="/neworder" @click="addTag($event)">新订单</el-menu-item>
                                <el-menu-item index="采购订单" route="/purchaseorder" @click="addTag($event)">采购订单
                                </el-menu-item>
                                <el-menu-item index="退货订单" route="/returnorder" @click="addTag($event)">退货订单
                                </el-menu-item>
                                <el-menu-item index="订单详情" route="/orderdetail" @click="addTag($event)">订单详情
                                </el-menu-item>
                            </el-sub-menu>
                            <el-sub-menu index="3">
                                <template #title>
                                    <el-icon>
                                        <User />
                                    </el-icon>
                                    <span>客户管理</span>
                                </template>
                                <el-menu-item index="客户管理" route="/customermanage" @click="addTag($event)">客户管理
                                </el-menu-item>
                                <el-menu-item index="省市县" route="/customercity" @click="addTag($event)">省市县
                                </el-menu-item>
                            </el-sub-menu>
                            <el-sub-menu index="4">
                                <template #title>
                                    <el-icon>
                                        <DocumentChecked />
                                    </el-icon>
                                    <span>一对多表</span>
                                </template>
                                <el-menu-item index="产品管理" route="/productcontrol" @click="addTag($event)">产品管理
                                </el-menu-item>
                            </el-sub-menu>
                            <el-sub-menu index="5">
                                <template #title>
                                    <el-icon>
                                        <Tickets />
                                    </el-icon>
                                    <span>流程管理</span>
                                </template>
                                <el-menu-item index="审批流程" route="/approvalprocess" @click="addTag($event)">
                                    审批流程</el-menu-item>
                                <el-menu-item index="发起流程" route="/initiateprocess" @click="addTag($event)">
                                    发起流程</el-menu-item>
                                <el-menu-item index="我的任务" route="/mytask" @click="addTag($event)">我的任务</el-menu-item>
                            </el-sub-menu>
                            <el-sub-menu index="6">
                                <template #title>
                                    <el-icon>
                                        <Menu />
                                    </el-icon>
                                    <span>数据库访问</span>
                                </template>
                                <el-menu-item index="数据库访问" route="/databaseaccess" @click="addTag($event)">
                                    数据库访问</el-menu-item>
                            </el-sub-menu>  
                            <el-sub-menu index="7">
                                <template #title>
                                    <el-icon>
                                        <Memo />
                                    </el-icon>
                                    <span>测试页面</span>
                                </template>
                                <el-menu-item index="测试页面" route="/testpage" @click="addTag($event)">测试页面
                                </el-menu-item>
                            </el-sub-menu>
                            <el-sub-menu index="8">
                                <template #title>
                                    <el-icon>
                                        <UserFilled />
                                    </el-icon>
                                    <span>用户管理</span>
                                </template>
                                <el-menu-item index="用户管理" route="/usermanage" @click="addTag($event)">用户管理
                                </el-menu-item>
                                <el-menu-item index="权限管理" route="/authorityManage" @click="addTag($event)">
                                    权限管理</el-menu-item>
                                <el-menu-item index="角色管理" route="/roleManagement" @click="addTag($event)">角色管理
                                </el-menu-item>
                            </el-sub-menu>
                            <el-sub-menu index="9">
                                <template #title>
                                    <el-icon>
                                        <Menu />
                                    </el-icon>
                                    <span>代码生成</span>
                                </template>
                                <el-menu-item index="代码生成" route="/codegeneration" @click="addTag($event)">代码生成
                                </el-menu-item>
                            </el-sub-menu>
                            <el-sub-menu index="10">
                                <template #title>
                                    <el-icon>
                                        <Tools />
                                    </el-icon>
                                    <span>系统管理</span>
                                </template>
                                <el-menu-item index="菜单设置" route="/menusettings" @click="addTag($event)">菜单设置
                                </el-menu-item>
                                <el-menu-item index="下拉框绑定设置" route="/selectsettings" @click="addTag($event)">
                                    下拉框绑定设置</el-menu-item>
                            </el-sub-menu>
                            <el-sub-menu index="11">
                                <template #title>
                                    <el-icon>
                                        <Warning />
                                    </el-icon>
                                    <span>日志管理</span>
                                </template>
                                <el-menu-item index="日志管理" route="/logmanagement" @click="addTag($event)">日志管理
                                </el-menu-item>
                            </el-sub-menu>
                        </el-menu>
                    </el-col>
                </el-row>
            </el-aside>
            <el-container class="right">
                <el-header class="header" style="display:flex">
                    <div style="position:absolute;color: white;z-index: 66;">
                        支持业务代码扩展的快速开发框架（vue3.x版本）
                    </div>
                    <el-menu class="header-center" mode="horizontal"
                        :style="`width:100%;height: 4rem; background-color:${themeColor}`">
                        <el-menu-item index="1" style="color: white;margin-left: 10rem;" @click="router.push('/hadoop')">大屏数据</el-menu-item>
                        <el-menu-item index="2" style="color: white;" @click="router.push('/framework')">框架文档</el-menu-item>
                        <el-menu-item index="3" style="color: white;"> <a class="aaa" href="https://github.com/cq-panda/Vue.NetCore" style="text-decoration:none;">GitHub</a> </el-menu-item>
                        <el-menu-item index="4" style="color: white;">个人中心</el-menu-item>
                        <el-menu-item index="5" style="color: white;" @click="exit">安全退出</el-menu-item>
                        <img src="/img/vol.png"
                            style="height:50px;border: 1px solid white;border-radius: 50%;margin-top:0.3rem;" />
                        <div class="header-right" style="color: white;z-index: 66;right: 0;">
                            <span>测试管理员</span>
                            <span> {{ yearMonthDay + ' ' + hourMinuteSecond + ' ' + whatDay }}</span>
                        </div>
                        <el-button type="primary"
                            style="width: 1.5rem; margin-top: 0.5rem;background-color: transparent;border: none;"
                            @click="drawer = true">
                            <Setting style="width:1.5rem;" />
                        </el-button> 

                    </el-menu>
                </el-header>
                <el-drawer v-model="drawer" :direction="direction" title="选择主题">
                    <div style="display:flex;flex-wrap: wrap;">
                        <div @click="themeColor = item" v-for="item in themeColorList" :key="index"
                            :style="`width:5rem;height:5rem;background-color:${item};border:1px solid #ccc;margin:0.5rem;cursor:pointer`">
                        </div>
                    </div>
                </el-drawer>
                <el-main class="main">
                    <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab"
                        @tab-click="change($event)" class="main_top">
                        <el-tab-pane label="首页">
                        </el-tab-pane>
                        <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title"
                            :name="item.name">
                        </el-tab-pane>
                    </el-tabs>
                    <div class="main_centen"> <router-view /></div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
  
<script setup>
import { onMounted, ref, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { Goods, Document, User, DocumentChecked, Tickets, Menu, Memo, UserFilled, Tools, Warning, Setting } from '@element-plus/icons-vue'
let isCollapse = ref(false)
let router = useRouter()
let hourMinuteSecond = ref('');
let yearMonthDay = ref('');
let whatDay = ref('');
let timer = ref(null);
let themeColor = ref('#409EFF')
let themeColorList = ['red', '#409EFF', 'lightblue', 'gray', 'black', 'pink', 'blueviolet']
let routerList = [
    { 首页: '/home' },
    { 商品分类: '/productClassify' },
    { 商品信息: '/productInfo' },
    { 商品信息tree: '/productTree' },
    { 订单管理: '/ordermanage' },
    { 新订单: '/neworder' },
    { 采购订单: '/purchaseorder' },
    { 退货订单: '/returnorder' },
    { 订单详情: '/orderdetail' },
    { 客户管理: '/customermanage' },
    { 省市县: '/customercity' },
    { 产品管理: '/productcontrol' },
    { 审批流程: '/approvalprocess' },
    { 发起流程: '/initiateprocess' },
    { 我的任务: '/mytask' },
    { 数据库访问: '/databaseaccess' },
    { 测试页面: '/testpage' },
    { 用户管理: '/usermanage' },
    { 权限管理: '/authorityManage' },
    { 角色管理: '/roleManagement' },
    { 代码生成: '/codegeneration' },
    { 菜单设置: '/menusettings' },
    { 下拉框绑定设置: '/selectsettings' },
    { 日志管理: '/logmanagement' },
]

// 可关闭标签页组件
let editableTabsValue = ref('0')
let editableTabs = ref([])
let tabIndex = 1
let change = (i) => {
    // console.log()
    router.push(routerList.find(r => r[i.props.label])[i.props.label])
}

let addTag = (i) => {
    let a = editableTabs.value.find(r => r.title == i.index)
    let b = i.index
    if (a == undefined) {
        const newTabName = `${++tabIndex}`
        editableTabs.value.push({
            title: b,
            name: newTabName,
            // name: editableTabs.value.length,
            content: routerList.find(r => r[b])[b]

        })
        editableTabsValue.value = newTabName
    }
    else if (a.name == '') return
    else {
        editableTabsValue.value = a.name
    }
}
const removeTab = (targetName) => {
    const tabs = editableTabs.value
    let activeName = editableTabsValue.value
    if (activeName === targetName) {
        tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
                const nextTab = tabs[index + 1] || tabs[index - 1]
                if (nextTab) {
                    activeName = nextTab.name
                    router.push(nextTab.content)
                } else {
                    router.push('/home')
                }
            }
        })
    }
    editableTabsValue.value = activeName
    editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
}
const exit = ()=>{
    router.push('/')
}
// 抽屉组件
const drawer = ref(false)
const direction = ref('rtl')

function timeFormate(timeStamp) {
    let year = new Date(timeStamp).getFullYear();
    let month =
        new Date(timeStamp).getMonth() + 1 < 10
            ? '0' + (new Date(timeStamp).getMonth() + 1)
            : new Date(timeStamp).getMonth() + 1;
    let date =
        new Date(timeStamp).getDate() < 10
            ? '0' + new Date(timeStamp).getDate()
            : new Date(timeStamp).getDate();
    let hh =
        new Date(timeStamp).getHours() < 10
            ? '0' + new Date(timeStamp).getHours()
            : new Date(timeStamp).getHours();
    let mm =
        new Date(timeStamp).getMinutes() < 10
            ? '0' + new Date(timeStamp).getMinutes()
            : new Date(timeStamp).getMinutes();
    let ss =
        new Date(timeStamp).getSeconds() < 10
            ? '0' + new Date(timeStamp).getSeconds()
            : new Date(timeStamp).getSeconds();
    let week = new Date(timeStamp).getDay();
    let weeks = ['日', '一', '二', '三', '四', '五', '六'];
    let getWeek = '星期' + weeks[week];
    hourMinuteSecond.value = hh + ':' + mm + ':' + ss;
    yearMonthDay.value = year + '年' + month + '月' + date + '日';
    whatDay.value = getWeek;
}
// 启动定时器
function showTimes() {
    timer = setInterval(() => {
        timeFormate(new Date());
    }, 1000);
}
// 销毁定时器
function clearTimer() {
    clearInterval(timer);
}
onMounted(() => {
    showTimes();
});
onBeforeUnmount(() => {
    clearTimer();
})
</script>
  
<style scoped lang="scss">
.all {
    width: 100vw;
    height: 100vh;
    display: flex;

    .left::-webkit-scrollbar {
        width: 1px;
    }

    .left {
        width: 20vw;

        .left_head {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            display: flex;
            align-items: center;
            justify-content: right;
            width: 100%;
            height: 4rem;
            color: white;
            font-size: 2rem;
            background-color: #409EFF;

            .vol {
                width: 90%;
                text-align: center;
            }

            .icon {

                // width: 10%;
                img {
                    width: 25px;
                }
            }
        }
    }

    .right {
        width: 80vw;

        .header {
            width: 100%;
            height: 4rem;
            line-height: 4rem;
            margin: 0;
            padding: 0;
            color: white;

            .header-right {
                display: flex;
                flex-direction: column;
                justify-content: center;
                line-height: 20px;
                margin-left: 20px;
            }
        }

        .main {
            margin: 0;
            padding: 0;
        }
    }
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;

}
.aaa:visited{
   color: white;
}

.main_top {
    z-index: 999;
    position: fixed;
    width: 100vw;
    height: 50px;
    top: 64px;
    background-color: #fff;
}

.main_centen {
    margin-top: 50px;
}
.el-menu:nth-child(2){
    padding-left: 43%;
}
</style>
  